<script setup>
import KOheader from '@/components/KOheader/KOheader.vue';
import KOfooter from '@/components/KOfooter/KOfooter.vue';
import { ref, watch, onMounted } from "vue";
const priceOMMH=[
  {
    url:"https://cdn.quickper.com/media/tagskin/product/e16b276c-9686-47ee-aef1-c9e0d5c813ae/w300h300t1.png",
    name:"OMMH | 覺知净化洗髮露",
    oldjia:"NT$ 780",
    newjia:"NT$ 680"
  },
  {
    url:"https://cdn.quickper.com/media/tagskin/product/569c8f8d-2244-4b8f-a27b-a022a56657f9/w300h300t1.png",
    name:"OMMH｜光譜還原護髮膜",
    oldjia:"NT$ 880",
    newjia:"NT$ 780"
  },
  {
    url:"https://cdn.quickper.com/media/tagskin/product/9f08ab8f-7d96-4277-bf86-cf167553023d/w300h300t1.png",
    name:"OMMH｜光譜還原護髮膜",
    oldjia:"NT$ 880",
    newjia:"NT$ 780"
  },
  {
    url:"https://cdn.quickper.com/media/tagskin/product/3ad119b6-4987-4137-bf49-3162f52cf6bd/w300h300t1.png",
    name:"OMMH｜光譜還原護髮膜",
    oldjia:"NT$ 880",
    newjia:"NT$ 780"
  },
  {
    url:"https://cdn.quickper.com/media/tagskin/product/4e992a2b-3d06-4268-ade7-3885f910e0a2/w300h300t1.png",
    name:"OMMH｜光譜還原護髮膜",
    oldjia:"NT$ 880",
    newjia:"NT$ 780"
  },
  {
    url:"https://cdn.quickper.com/media/tagskin/product/4e992a2b-3d06-4268-ade7-3885f910e0a2/w300h300t1.png",
    name:"OMMH｜光譜還原護髮膜",
    oldjia:"NT$ 880",
    newjia:"NT$ 780"
  },
  {
    url:"https://cdn.quickper.com/media/tagskin/product/4e992a2b-3d06-4268-ade7-3885f910e0a2/w300h300t1.png",
    name:"OMMH｜光譜還原護髮膜",
    oldjia:"NT$ 880",
    newjia:"NT$ 780"
  },
  {
    url:'@/assets/look.png',
    name:"",
    oldjia:"",
    newjia:""
  },
]
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css'
const innerWidth = ref(false)
onMounted(() => {
  window.innerWidth < 1000 ? innerWidth.value = false : innerWidth.value = true
})
const handleResize = () => {
  window.innerWidth < 1000 ? innerWidth.value = false : innerWidth.value = true
};
watch(() => window.innerWidth, handleResize)
</script>

<template>
  <div v-if="innerWidth">
    <KOheader/>
    <div style="font-size: 25px; font-weight: 700; margin-left:300px ;margin-top: 50px;">您希望訂單配送至何處？</div>
    <div style="display: flex; margin-left:300px ;margin-top: 20px;">
      <button style="display: flex; justify-content: center; align-items: center; width: 130px; height: 50px; background-color: #fff; border: 2px solid #000;border-radius: 10px;">
        <img style="margin-right: 10px; width: 20px; height: 20px;" src="https://cdn.quickper.com/static/img/icons/shipping.png" alt="">
        <div>台灣（國內）</div>
      </button>
      <button style="display: flex; justify-content: center; align-items: center; margin-left:10px ; width: 130px; height: 50px; background-color: #fff; border: 2px solid #000;border-radius: 10px;">
        <img style="margin-right: 10px; width: 20px; height: 20px;" src="https://cdn.quickper.com/static/img/icons/accountMenu.png" alt="">
        <div>海外</div>
      </button>
    </div>
    <div style="margin-top: 30px; font-size: 25px; font-weight: 700; margin-left:300px ;">您購物車中的項目</div>
    <div style="margin-top: 20px; font-size: 14px; color: #888;margin-left: 300px;">您尚未加入商品。 立即開始探索靈感，展開下個購物之旅吧！</div>
    <div style="margin-top:30px; padding-left:300px ; padding-right:300px; border-radius: 10px;">
          <h2 style="color: #000; font-weight: 700;">探索熱門商品</h2>
          <div style="display: flex; margin-top: 30px; overflow: hidden ;">
            <swiper
              :slides-per-view="4"
              :space-between="0"
              :autoplay="{delay: 3000}"
            >
            <swiper-slide @click="toaction(item)" style="width: 200px; height: 250px; margin-right:10px ;" v-for="item,index in priceOMMH" :key="index">
              <img style="width: 200px; height: 200px;border-radius: 10px;" :src=item.url alt="">
              <div>{{ item.name }}</div>
              <div><span style="text-decoration: line-through; font-weight: 700;">{{ item.oldjia }} </span><span style="margin-left: 10px; color: red; font-weight: 700;">{{ item.newjia }}</span></div>
            </swiper-slide>
          </swiper>
          </div>
    </div>
    <KOfooter/>
  </div>
  <div v-else>
    <KOheader/>
    <div style="font-size: 25px; font-weight: 700; margin-left:20px ;margin-top: 50px;">您希望訂單配送至何處？</div>
    <div style="display: flex; margin-left:20px ;margin-top: 20px;">
      <button style="display: flex; justify-content: center; align-items: center; width: 130px; height: 50px; background-color: #fff; border: 2px solid #000;border-radius: 10px;">
        <img style="margin-right: 10px; width: 20px; height: 20px;" src="https://cdn.quickper.com/static/img/icons/shipping.png" alt="">
        <div>台灣（國內）</div>
      </button>
      <button style="display: flex; justify-content: center; align-items: center; margin-left:10px ; width: 130px; height: 50px; background-color: #fff; border: 2px solid #000;border-radius: 10px;">
        <img style="margin-right: 10px; width: 20px; height: 20px;" src="https://cdn.quickper.com/static/img/icons/accountMenu.png" alt="">
        <div>海外</div>
      </button>
    </div>
    <div style="margin-top: 30px; font-size: 25px; font-weight: 700; margin-left:20px ;">您購物車中的項目</div>
    <div style="margin-top: 20px; font-size: 14px; color: #888;margin-left: 20px;">您尚未加入商品。 立即開始探索靈感，展開下個購物之旅吧！</div>
    <div style="margin-top:30px; padding-left:20px ; padding-right:20px; border-radius: 10px;">
          <h2 style="color: #000; font-weight: 700;">探索熱門商品</h2>
          <div style="display: flex; margin-top: 30px; overflow: hidden ;">
            <swiper
              :slides-per-view="4"
              :space-between="0"
              :autoplay="{delay: 3000}"
            >
            <swiper-slide @click="toaction(item)" style="width: 200px; height: 250px; margin-right:10px ;" v-for="item,index in priceOMMH" :key="index">
              <img style="width: 200px; height: 200px;border-radius: 10px;" :src=item.url alt="">
              <div>{{ item.name }}</div>
              <div><span style="text-decoration: line-through; font-weight: 700;">{{ item.oldjia }} </span><span style="margin-left: 10px; color: red; font-weight: 700;">{{ item.newjia }}</span></div>
            </swiper-slide>
          </swiper>
          </div>
    </div>
    <KOfooter/>
  </div>
</template>

<style scoped></style>